<template>
  <div>
    <el-dialog
        title="合同详情"
        v-model="dialogVisible"
        @close="dialogVisible = false"
        top="5vh"
    >
      <el-form :model="contract" label-width="100px">
        <el-form-item label="合同编码:" prop="barcode">
          {{ contract.barcode }}
        </el-form-item>
        <el-form-item label="类型:" prop="type">
          {{ contract.type === 0 ? "省内" : "省外" }}
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item label="客户信息：" prop="clientid"> </el-form-item>
        <div style="margin-left: 15px">
          姓名: {{ contract.client?.name }} &nbsp;&nbsp;联系电话:
          {{ contract.client?.telephone }} &nbsp;&nbsp;进货地址:
          {{ contract.client?.address }}
        </div>
        <el-divider></el-divider>
        <span>货物信息：</span>
        <el-table :data="contract.cars" style="width: 930px" stripe>
          <el-table-column prop="name" label="名称" width="120" align="center">
          </el-table-column>
          <el-table-column prop="price" label="价格" width="120" align="center">
          </el-table-column>
          <el-table-column
              prop="locality"
              label="产地"
              width="120"
              align="center"
          >
          </el-table-column>
          <el-table-column
              prop="accessories"
              label="附属品"
              width="120"
              align="center"
          >
            <template #default="scope">
              <div
                  v-if="scope.row.accessories.length > 0"
                  v-for="item in scope.row.accessories"
                  :key="item.name"
              >
                {{ item.name }}:{{ item.price }}元
              </div>
              <div v-if="scope.row.accessories.length === 0">无附属品</div>
            </template>
          </el-table-column>
          <el-table-column
              prop="number"
              label="数量"
              width="240"
              align="center"
          >
            <template #default="scope"> {{ scope.row.number }} </template>
          </el-table-column>
        </el-table>
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { ElDialog, ElForm, ElFormItem, ElDivider, ElTable, ElTableColumn } from 'element-plus';
import { findDetail } from '../services/Contract.ts';

interface Accessory {
  name: string;
  price: number;
}

interface Car {
  name: string;
  price: number;
  locality: string;
  accessories: Accessory[];
  number: number;
}

interface Client {
  name: string;
  telephone: string;
  address: string;
}

interface Contract {
  barcode: string;
  type: number;
  client: Client;
  cars: Car[];
}

export default defineComponent({
  name: 'ContractDetail',
  components: {
    ElDialog,
    ElForm,
    ElFormItem,
    ElDivider,
    ElTable,
    ElTableColumn,
  },
  setup() {
    const dialogVisible = ref(false);
    const contract = ref<Contract>({
      barcode: '',
      type: 0,
      client: {
        name: '',
        telephone: '',
        address: '',
      },
      cars: [],
    });

    const show = (contractid: string) => {
      dialogVisible.value = true;
      findDetail(contractid).then((response) => {
        contract.value = response.data.data;
      });
    };

    return {
      dialogVisible,
      contract,
      show,
    };
  },
});
</script>

<style lang="css" scoped></style>
